<template>
<div v-show="this.cartShow && this.amount1!=0"  class="aa">
<div class="bb">
            <div class="bottom-top">
                <input type="checkbox"  class="input" :checked="this.isAll===true">全选
                <div class="delete">清空购物车</div>
            </div>
            <div class="hr"></div>
                <div class="right2" v-for="(item,index) in cart" :key="index">
                    <div class="cardGoods1">
                        <input type="checkbox" class="input" :checked="this.isAll===true">
                        <div class="cardImg11">
                            <img :src="item.img" class="img1">
                        </div>
                        <div class="cardContent1">
                            <span class="goodsName1">{{item.goodsName}}</span>
                            <div class="price1">
                                <span class="price11"><span>￥</span>{{item.price}}<s>￥{{item.oldPrice}}</s></span>
                            </div>
                        </div>
                        <img src="../assets/减少.png" class="jian1" @click="jian(index)">
                        <span class="number1">{{item.amount}}</span>
                        <img src="../assets/加.png" class="jia1" @click="jia(index)">
                    </div>
                </div>
                
            </div>
            </div>
</template>

<script>
 import {mapState,mapGetters,mapMutations} from 'vuex'

export default{
    data(){
    
      return {
        id:this.$route.params.id,
       left:['全部商品','秒杀','新鲜水果','休闲食品','时令蔬菜','肉蛋家禽'],
       goods:[],
       num:0,
       isAll:true,
      }
    },
    created(){
    },
    computed:{
      ...mapState(['saleInfo','sales','amount1','total','cartShow','cart']), 
      ...mapGetters(['Info','goods1','goods2','goods3','goods4','goods5','goods0','amount','selectGoods']) ,
    },
    
    methods:{
        ...mapMutations(['jia','jian','tatal','addCart']),
      change(key){
          this.num=key;
      },
    }
}
</script>

<style lang="scss" scoped>
.aa{
     background-color: rgb(0,0,0,0.5);
        /* opacity: 0.5; */
        height: 92vh;
        z-index: 999;
        position: fixed;
        width: 100vw;
}
.bb{
    position: fixed;
    bottom: 8vh;
    background-color: white;
}
input[type="checkbox"] {
  width: 22px;
  height: 22px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 18px;
  position: relative;
}
input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #fff; /* 未选中的背景色 */
  width: 100%;
  height: 100%;
  border: 1px solid #d9d9d9;
}
input[type="checkbox"]:checked::before {
  content: "\2713";  /* 是转义的'√'，可自定义 */
  background-color: #0D9BFF; /* 自定义选中的背景颜色 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid #0D9BFF;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

.bottom-top{
    display:flex;
    margin:3vw;
    background-color: white;
     input{
            width:5vw;
            height:5vw;
             margin-right: 3vw;
             position:relative;
        }
        .delete{
                margin-left: 56vw;
        }
       
}
 .hr{
            background-color:#ccc;
            width:100vw;
            height:0.1vw;
            margin-bottom:3vw;
        }
.right2{
        background-color:white;
        display:flex;
        bottom:8vh;
        flex-direction:column;

        input{
            width:5vw;
            height:5vw;
        }
        .cardGoods1{
            display:flex;
            justify-content:space-between;
            margin-left: 3vw;
            margin-bottom:3vw;
            align-items:center;
            .cardImg11{
                    margin: 0 3vw 0 3vw;
                img{
                    width:15vw;
                    height:15vw;
                   
                }
            }
            .cardContent1{
                display:flex;
                flex-direction:column;
                .goodsName1{
                    font-size: 4.5vw;
                    margin-bottom: 3vw;
                    font-weight: 545;
                }
                .goodsNumber1{
                    font-size: 3.5vw;
                    margin-bottom: 2vw;
                }
                .price1{
                    display:flex;
                    width: 50vw;
                    justify-content: space-between;
                    s{
                        color: #ccc;
                        margin-left: 1vw;
                        font-size: 3vw;
                    }
                    .price11{
                        color:red;
                        font-size:4.5vw;
                        span{
                            font-size:2vw;
                        }
                    }
                   
                   
                }
                
            }
             .jia1{
                    width: 8vw;
                    margin-right: 4vw;
                    margin-left: 3vw;
                    height: 8vw;
             }
            .jian1{
                    width: 8vw;
                    height: 8vw;
                    margin-left: -7vw;
                    margin-right: 3vw;
             }
            .number1{
                    line-height:5vw;
            }
        }
    }
</style>